<!--
 * @Descripttion: 
 * @version: 
 * @Author: Ansel
 * @Date: 2020-04-02 12:02:08
 * @LastEditors: Ansel
 * @LastEditTime: 2020-04-06 15:14:28
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.js"></script>
    <style>
        #chart1,
        #chart2 {
            width: 1000px;
            height: 800px;
            float: left;
        }
        #chart2{
            float: right;
        }
    </style>
</head>

<body>
    <div id="chart1"></div>
    <div id="chart2"></div>
    <script>
        // console.log(echarts);
        var myCharts1 = echarts.init(document.getElementById("chart1"));//生成一个echarts实例
        myCharts1.setOption({//配置图表的参数
            title: {
                text: "柱状图"
            },
            legend: {    //图例组件
                data: ['昨日销量', '今日销量', {
                    name: '明日销量',
                    icon: 'image://',
                    textStyle: {

                    }
                }],
                orientation: 'horizontal',
                left: 'right',
                itemGap: 30,
                itemWidth: 35,
                itemHeight: 20,
                // formatter:'{name} 高么？',
                formatter: function (name) {
                    return "你说" + name + "高么？"
                },
                selectedMode: 'multiple',
                // show:false
                inactiveColor: '#ccc',
                selected: {
                    // '明日销量':true,
                    // '今日销量':false,
                    // '昨日销量':false
                },
                textStyle: {
                    color: '#f00'
                },
                backgroundColor: "transparent"

            },
            //tooltip提示框组件
            tooltip: {
                show: true
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {//y轴的设置

            },
            series: [
                { //系列列表
                    name: "昨日销量",
                    type: 'bar', //图表的类型
                    data: [5, 20, 36, 10, 19, 14] //图表的数据
                },
                { //系列列表
                    name: "今日销量",
                    type: 'bar', //图表的类型
                    data: [5, 20, 36, 10, 19, 14] //图表的数据
                },
                { //系列列表
                    name: "明日销量",
                    type: 'bar', //图表的类型
                    data: [5, 20, 36, 10, 19, 14] //图表的数据
                },
            ]
        })

        var myCharts2 = echarts.init(document.getElementById("chart2"));//生成一个echarts实例
        var data = getData();
        myCharts2.setOption({//配置图表的参数
            legend:{
                type:'scroll',
                data:data.legendData,
                selected:data.selected,
                scrollDataIndex:3,
                pageButtonItemGap:10,
                pageButtonGap:40,
                pageButtonPosition:'start',
                // pageFormatter:'{current}/{total}',
                pageFormatter:function(obj){
                    // console.log(obj);
                    return obj.current + '--' + obj.total
                },
                orient:'vertical',
                // orient:'horizontal',
                left:'right',
                pageIcons:{
                    vertical:[
                        'image://',
                        'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'
                    ]
                },
                pageIconColor:'red',
                pageIconInactiveColor:'green',
                // pageIconSize:30
                pageIconSize:[30,50],
                pageTextStyle:{
                    color:"tell"
                },
                // animation:false,
                animationDurationUpdate:1500
            },
            series:[
                {
                    name:'姓名',
                    type:'pie',
                    data:data.seriesData
                }
            ]
            // title:{
            //     text:"饼图"
            // },
            // series:{ //系列列表
            //     name:"访问来源",
            //     type:'pie', //图表的类型
            //     roseType:'angle', //蓝丁格尔图
            //     data:[
            //         {value:235,name:"视频广告"},
            //         {value:274,name:"联盟广告"},
            //         {value:300,name:"邮件营销"},
            //         {value:350,name:"搜索引擎"},
            //         {value:400,name:"直接访问"},
            //     ] //图表的数据
            // }
        });

        function getData() {
            var nameList = [
                '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
            ]; 
            var legendData = [];  //图例数据 ['和穆','屈项'，....]
            var seriesData = [];  //系列数据 [{name:'和穆',value:20298},'屈项'，....]
            var selected = {};    //选中的图例 {'和穆'：true}

            nameList.sort(function () {
                return Math.random() - 0.5;
            });
            for (var i = 0; i < 50; i++) {
                var makeUpName = nameList[0] + nameList[1];//拼成的数据
                legendData.push(makeUpName);
                seriesData.push({
                    name: makeUpName,
                    value: Math.round(100000 * Math.random())
                });
                selected[makeUpName] = i < 6;
                //把已经获取到的两个数据从原数组里面删除掉 
                nameList.shift();
                nameList.shift();
            }
            // console.log(selected);
            // console.log(seriesData);
            // console.log(legendData);
            return {
                legendData:legendData,
                seriesData:seriesData,
                selected:selected
            }
        }
        console.log(getData());
    </script>
</body>

</html>